<template>
    <div>
        <div class="box">
            <el-form :model="queryForm" ref="queryRef">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="课程：" prop="cur_name">
                            <el-input v-model.tirm="queryForm.cur_name" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学生：" prop="stu_name">
                            <el-input v-model.trim="queryForm.stu_name" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <el-button @click="getOrderList(false)" :loading="searchLoading" type="primary">
                                <icons name="search"></icons>
                                搜索
                            </el-button>
                            <el-button @click="reset()">
                                <icons name="reset"></icons>重置
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="container">
            <el-button @click="showAddOrder()" type="primary" style="margin-bottom: 10px">+ 新增订单</el-button>
            <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%">
                <el-table-column prop="stu_name" label="学生" align="center" header-align="center" />
                <el-table-column prop="cur_name" label="课程" align="center" header-align="center" />
                <el-table-column prop="tea_name" label="课程" align="center" header-align="center" />
                <el-table-column prop="cur_price" label="订单金额" align="center" header-align="center" />
                <el-table-column prop="orderTime" label="订单时间" align="center" header-align="center" />
                <el-table-column prop="order_statusName" label="订单状态" align="center" header-align="center">
                    <template #default="{ row }">
                        <span :style="`color: ${colorObj[row.order_statusCode]}`">
                            {{ row.order_statusName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" header-align="center">
                    <template #default="{ row }">
                        <el-button @click="openOperate(true, row)" v-if="[1, 5, 6].includes(row.order_statusCode)"
                            type="text">申请删除</el-button>
                        <el-button @click="openOperate(false, row)" v-if="[1, 5, 6].includes(row.order_statusCode)"
                            type="text">申请退款</el-button>
                        <el-button @click="refund(row)" v-if="row.order_statusCode === 3" type="text">已经退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paging">
                <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
                    @current-change="hCurrentChange" @size-change="hSizeChange" />
            </div>
        </div>
        <addOrder :valueShow="orderShow" @closeAddOrder="closeAddOrder" />
        <operate :valueShow="operateShow" :valueType="operateType" :valueRow="operateRow" @closeOperate="closeOperate" />
    </div>
</template>
<script lang="ts">
import { queryOrderList, refunded } from '@/api/goodsOrder/addOrder'
import addOrder from './components/addOrder.vue'
import operate from './components/operate.vue'
import { defineComponent, reactive, ref } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    setup(props) {
        const { proxy } = useCurrentInstance()
        const queryRef: any = ref(null)
        const searchLoading = ref(false)
        const tableLoading = ref(false)
        const tableData = ref(null)
        const total = ref(0)
        const orderShow = ref(false)
        const queryForm = reactive({
            cur_name: null,
            stu_name: null,
            page: 1,
            pageSize: 10,
        })
        const colorObj = {
            1: '#67c23a', // 绿
            2: '#e6a23c', // 黄
            3: '#409eff', // 蓝
            4: '#909399', // 灰
            5: '#f56c6c', // 红
            6: '#f56c6c', // 深灰
            7: '#0bcadf' // 青色
        }
        const operateShow: any = ref(false)
        const operateType: any = ref(null) // true: 申请删除 false: 申请退款
        const operateRow: any = ref(null)

        const getOrderList = (page) => {
            page && (queryForm.page = page)
            searchLoading.value = true
            tableLoading.value = true
            queryOrderList(queryForm).then((res: any) => {
                total.value = res.data.total
                tableData.value = res.data.orderList
            }).finally(() => {
                searchLoading.value = false
                tableLoading.value = false
            })
        }

        const refund = (val) => {
            ElMessageBox.confirm(
                '确定此订单已经退款?',
                '',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    tableLoading.value = true
                    refunded({ order_id: val.order_id }).then((res: any) => {
                        ElMessage.success(res.message)
                        getOrderList(null)
                    }).finally(() => {
                        tableLoading.value = false
                    })
                })
                .catch(() => { })
        }

        /**
         * @param type 操作类型
         * @param row 当前行信息
         */
        const openOperate = (type, row) => {
            operateShow.value = true
            operateType.value = type
            operateRow.value = row
        }

        const reset = () => {
            queryRef.value.resetFields()
        }

        const showAddOrder = () => {
            orderShow.value = true
        }

        const closeAddOrder = (val) => {
            orderShow.value = false
            val && getOrderList(null)
        }

        const closeOperate = (val) => {
            operateShow.value = false
            operateType.value = null
            operateRow.value = null
            val && getOrderList(false)
        }

        const hCurrentChange = (val) => {
            queryForm.page = val
        }

        const hSizeChange = (val) => {
            queryForm.pageSize = val
        }

        getOrderList(false) // 分页查询

        return {
            total,
            queryForm,
            queryRef,
            searchLoading,
            tableLoading,
            tableData,
            orderShow,
            colorObj,
            operateShow,
            operateType,
            operateRow,
            hCurrentChange,
            hSizeChange,
            showAddOrder,
            closeAddOrder,
            getOrderList,
            reset,
            closeOperate,
            openOperate,
            refund
        }
    },
    components: { addOrder, operate },
})
</script>
<style scoped></style>
